<template>
  <div class="video-call-container">
    <!-- 摄像头画面 -->
    <video ref="localVideoRef" autoplay playsinline muted
    style="position: fixed; top: 0; right: 0; width: 150px; height: 150px;"></video>
    <!-- 本地音频监听 -->
    <audio ref="localAudioRef" autoplay></audio>
    <!-- 远端视频（对方） -->
    <video ref="remoteVideoRef" autoplay playsinline muted
    ></video>

    <div class="icon-sender" v-show="currentInfo.direction == 'outgoing'">
      <span>{{ callStatus ? '正在通话...' : '呼叫中...' }}</span>
      <div class="operation">
        <div class="icon-left" @click="toggleVideo">
          <svg v-show="!videoEnabled" t="1757552065097" class="icon" viewBox="0 0 1152 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5705" width="200" height="200">
            <path
              d="M1114.190582 774.526368a42.485379 42.485379 0 0 1-24.505874-6.590352c-76.716821-46.196451-155.16121-93.992502-231.942014-140.188953v145.115721c0 56.049988-45.748563 103.910022-102.950263 103.910023H372.743943l483.335167-478.344414v14.908273c78.444389-49.459635 158.488378-97.255686 238.532366-145.115721 3.263184-1.5996 6.526368-3.263184 9.789553-3.263184h47.412147v509.568607h-37.622594z m-1102.700325 52.72282A82.603349 82.603349 0 0 1 0.03712 782.716321V258.367408c0-44.532867 34.35941-84.138965 78.444389-92.328918 6.590352-1.663584 14.716321-1.663584 22.842289-1.663584h651.869033c1.855536 0 3.51912 0.447888 5.374656 0.575856L50.584483 865.575606a93.288678 93.288678 0 0 1-39.094226-38.326418zM240.105103 447.888028a79.980005 79.980005 0 1 0 0-159.96001 79.980005 79.980005 0 0 0 0 159.96001z"
              fill="#666666" p-id="5706"></path>
            <path
              d="M998.31555 31.608098l55.6021 55.026243L106.826423 1023.936016 51.224323 968.973757 998.31555 31.608098z"
              fill="#CC2929" p-id="5707"></path>
          </svg>
          <svg v-show="videoEnabled" t="1757551528472" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="4453" width="200" height="200">
            <path
              d="M640 230.4H108.8C64 230.4 32 262.4 32 307.2v422.4c0 44.8 32 76.8 76.8 76.8H640c44.8 0 76.8-32 76.8-76.8V307.2c0-38.4-32-76.8-76.8-76.8zM313.6 460.8c-6.4 32-32 57.6-64 64-64 12.8-115.2-44.8-102.4-102.4 6.4-32 32-57.6 64-64 64-12.8 115.2 38.4 102.4 102.4zM953.6 300.8l-128 76.8c-25.6 19.2-44.8 25.6-44.8 51.2v166.4c0 25.6 19.2 38.4 44.8 51.2l128 76.8c25.6 19.2 44.8 6.4 44.8-19.2V326.4c-6.4-25.6-25.6-38.4-44.8-25.6"
              p-id="4454" fill="#8a8a8a"></path>
          </svg>
        </div>
        <div class="icon-right" @click="toggleAudio">
          <svg v-show="!audioEnabled" t="1757554727212" viewBox="0 0 1056 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13514" width="200" height="200">
            <path fill="#666666"
              d="M522.336 732.8c108.8 0 201.6-99.2 201.6-211.2V275.2c0-57.6-22.4-108.8-57.6-150.4-41.6-41.6-92.8-64-144-64s-105.6 25.6-144 67.2-57.6 89.6-57.6 147.2v243.2c0 118.4 92.8 214.4 201.6 214.4z"
              p-id="13515"></path>
            <path fill="#666666"
              d="M839.136 540.8c0-16-16-35.2-35.2-35.2s-35.2 16-35.2 35.2c0 137.6-108.8 246.4-246.4 246.4s-246.4-108.8-246.4-246.4c0-16-16-35.2-35.2-35.2s-35.2 16-35.2 35.2c0 166.4 121.6 297.6 281.6 316.8v35.2h-70.4c-12.8 0-16 6.4-22.4 12.8-6.4 6.4-12.8 16-12.8 22.4 0 16 16 35.2 35.2 35.2h211.2c16 0 35.2-16 35.2-35.2 0-12.8-6.4-16-12.8-22.4s-16-12.8-22.4-12.8h-73.6v-35.2c163.2-19.2 284.8-150.4 284.8-316.8z"
              p-id="13516"></path>
            <path fill="#CC2929"
              d="M176 150.4c16-16 44.8-16 60.8 0l662.4 662.4c16 16 16 44.8 0 60.8s-44.8 16-60.8 0L176 211.2c-16-16-16-44.8 0-60.8z"
              p-id="13517"></path>
          </svg>
          <svg v-show="audioEnabled" t="1757554691914" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13357" width="200" height="200">
            <path fill="#8a8a8a"
              d="M825.12 368.896a32.064 32.064 0 0 1 32.032 32v140.608a321.056 321.056 0 0 1-25.6 126.4 328.64 328.64 0 0 1-173.312 173.312 321.984 321.984 0 0 1-117.472 25.6V960h98.624a32 32 0 0 1 0 64h-261.504a32 32 0 1 1 0-64h98.496v-93.216a321.92 321.92 0 0 1-117.472-25.6A328.64 328.64 0 0 1 185.6 667.872a321.024 321.024 0 0 1-25.6-126.4v-140.576a32 32 0 0 1 64 0v140.576a262.4 262.4 0 0 0 261.504 261.504h46.112a262.4 262.4 0 0 0 261.504-261.504v-140.576a32 32 0 0 1 32-32z m-110.496 28.512v114.72a206.016 206.016 0 0 1-412.032 0v-114.72h412.032zM508.48 0a206.016 206.016 0 0 1 206.016 206.016v127.328H302.464V206.016A206.016 206.016 0 0 1 508.48 0z"
              p-id="13358"></path>
          </svg>
        </div>
        <span class="tip">{{ videoEnabled ? '摄像头已开' : '摄像头已关' }}</span>
        <span class="tip">{{ audioEnabled ? '麦克风已开' : '麦克风已关' }}</span>
      </div>
      <div class="icon-end" @click="endCall">
        <svg t="1757570072931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="5307" width="200" height="200">
          <path
            d="M512 1023.999069a508.779681 508.779681 0 0 1-199.291759-40.238472 510.300163 510.300163 0 0 1-162.745886-109.73071A510.354466 510.354466 0 0 1 40.231646 711.284001 508.826226 508.826226 0 0 1 0.000931 512a508.841741 508.841741 0 0 1 40.238472-199.291759 510.338951 510.338951 0 0 1 109.73071-162.745886A510.292406 510.292406 0 0 1 312.708241 40.239403 508.787439 508.787439 0 0 1 512 0.000931a508.795196 508.795196 0 0 1 199.291759 40.238472 510.222587 510.222587 0 0 1 162.745886 109.722952 510.284648 510.284648 0 0 1 109.730709 162.745886A508.841741 508.841741 0 0 1 1023.999069 512a508.826226 508.826226 0 0 1-40.238472 199.291759 510.292406 510.292406 0 0 1-109.73071 162.745886 510.27689 510.27689 0 0 1-162.745886 109.730709A508.795196 508.795196 0 0 1 512 1023.999069zM252.695744 543.348307a13.4904 13.4904 0 0 0 3.878781 9.471982 13.335248 13.335248 0 0 0 9.471983 3.917569l127.456738-0.201697a13.428339 13.428339 0 0 0 13.412824-13.412824l0.06206-51.680875a87.272569 87.272569 0 0 1 24.420804-20.030025 161.489161 161.489161 0 0 1 82.493911-20.16966h0.279272a159.573043 159.573043 0 0 1 82.230154 20.084327 86.985539 86.985539 0 0 1 24.296683 20.084327v51.362816a13.358521 13.358521 0 0 0 3.878781 9.471983 13.226643 13.226643 0 0 0 9.425437 3.917568l114.400762-0.170666h13.110279a13.358521 13.358521 0 0 0 9.495255-3.917569 13.451612 13.451612 0 0 0 3.878781-9.495255l0.054303-29.168432a13.226643 13.226643 0 0 0-0.387878-3.157327l-0.558544-2.327269a88.436203 88.436203 0 0 0-6.826655-27.570374c-25.553408-59.453953-131.288973-104.292659-245.914704-104.292659h-0.589575a511.355191 511.355191 0 0 0-134.903997 18.967238c-45.102463 12.776704-80.802762 30.681156-100.514726 50.424151a114.990336 114.990336 0 0 0-24.901773 35.645996 86.357176 86.357176 0 0 0-7.57138 34.505634l-0.054303 27.787586z"
            fill="#FC4A46" p-id="5308"></path>
        </svg>
      </div>
    </div>

    <div class="icon-receiver" v-show="currentInfo.direction == 'incoming'">
      <div class="icon-top">
        <a-avatar :src="baseURL + currentInfo.avatar" :size="80" shape="square"></a-avatar>
        <span>{{ currentInfo.nickname }}</span>
      </div>
      <span>{{ callStatus ? '呼叫中...' : '对方正在呼叫...' }}</span>
      <div class="icon-fotter">
        <div class="hang-up" @click="endCall">
          <svg t="1757570072931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5307" width="200" height="200">
            <path
              d="M512 1023.999069a508.779681 508.779681 0 0 1-199.291759-40.238472 510.300163 510.300163 0 0 1-162.745886-109.73071A510.354466 510.354466 0 0 1 40.231646 711.284001 508.826226 508.826226 0 0 1 0.000931 512a508.841741 508.841741 0 0 1 40.238472-199.291759 510.338951 510.338951 0 0 1 109.73071-162.745886A510.292406 510.292406 0 0 1 312.708241 40.239403 508.787439 508.787439 0 0 1 512 0.000931a508.795196 508.795196 0 0 1 199.291759 40.238472 510.222587 510.222587 0 0 1 162.745886 109.722952 510.284648 510.284648 0 0 1 109.730709 162.745886A508.841741 508.841741 0 0 1 1023.999069 512a508.826226 508.826226 0 0 1-40.238472 199.291759 510.292406 510.292406 0 0 1-109.73071 162.745886 510.27689 510.27689 0 0 1-162.745886 109.730709A508.795196 508.795196 0 0 1 512 1023.999069zM252.695744 543.348307a13.4904 13.4904 0 0 0 3.878781 9.471982 13.335248 13.335248 0 0 0 9.471983 3.917569l127.456738-0.201697a13.428339 13.428339 0 0 0 13.412824-13.412824l0.06206-51.680875a87.272569 87.272569 0 0 1 24.420804-20.030025 161.489161 161.489161 0 0 1 82.493911-20.16966h0.279272a159.573043 159.573043 0 0 1 82.230154 20.084327 86.985539 86.985539 0 0 1 24.296683 20.084327v51.362816a13.358521 13.358521 0 0 0 3.878781 9.471983 13.226643 13.226643 0 0 0 9.425437 3.917568l114.400762-0.170666h13.110279a13.358521 13.358521 0 0 0 9.495255-3.917569 13.451612 13.451612 0 0 0 3.878781-9.495255l0.054303-29.168432a13.226643 13.226643 0 0 0-0.387878-3.157327l-0.558544-2.327269a88.436203 88.436203 0 0 0-6.826655-27.570374c-25.553408-59.453953-131.288973-104.292659-245.914704-104.292659h-0.589575a511.355191 511.355191 0 0 0-134.903997 18.967238c-45.102463 12.776704-80.802762 30.681156-100.514726 50.424151a114.990336 114.990336 0 0 0-24.901773 35.645996 86.357176 86.357176 0 0 0-7.57138 34.505634l-0.054303 27.787586z"
              fill="#FC4A46" p-id="5308"></path>
          </svg>
        </div>
        <div class="answer" @click="acceptCall">
          <svg t="1757643061053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4054" width="200" height="200">
            <path
              d="M512 0c282.770286 0 512 229.229714 512 512S794.770286 1024 512 1024 0 794.770286 0 512 229.229714 0 512 0z m-81.247086 370.746514c-55.222857-98.435657-91.867429-94.4128-100.937143-91.896685-35.4304 9.903543-64.117029 74.313143-46.562742 144.6912 17.6128 70.7584 54.959543 141.546057 111.440457 198.407314 56.963657 56.568686 127.780571 93.871543 198.465828 111.469714 70.363429 17.583543 134.8608-11.117714 144.705829-46.592 2.442971-8.981943 6.538971-45.568-91.984457-100.7616-28.218514-15.872-26.8288-3.642514-84.392229 31.597714-26.872686 16.369371-63.370971-10.591086-63.370971-10.591085-2.048-1.316571-29.681371-19.002514-49.517715-38.912-20.5824-20.626286-38.955886-49.532343-38.955885-49.532343s-27.0336-36.498286-10.532572-63.370972c35.284114-57.519543 47.396571-56.159086 31.6416-84.509257z"
              fill="#18C000" p-id="4055"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="icon-receiver" v-show="currentInfo.direction == 'default'">
      <div class="icon-top">
        <a-avatar :src="baseURL + info.avatar" :size="80" shape="square"></a-avatar>
        <span>{{ info.nickname }}</span>
      </div>
      <span>是否邀请对方进行视频通话</span>
      <div class="icon-fotter">
        <div class="hang-up">
          <router-link to="/main">
            <svg t="1757570072931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5307" width="200" height="200">
              <path
                d="M512 1023.999069a508.779681 508.779681 0 0 1-199.291759-40.238472 510.300163 510.300163 0 0 1-162.745886-109.73071A510.354466 510.354466 0 0 1 40.231646 711.284001 508.826226 508.826226 0 0 1 0.000931 512a508.841741 508.841741 0 0 1 40.238472-199.291759 510.338951 510.338951 0 0 1 109.73071-162.745886A510.292406 510.292406 0 0 1 312.708241 40.239403 508.787439 508.787439 0 0 1 512 0.000931a508.795196 508.795196 0 0 1 199.291759 40.238472 510.222587 510.222587 0 0 1 162.745886 109.722952 510.284648 510.284648 0 0 1 109.730709 162.745886A508.841741 508.841741 0 0 1 1023.999069 512a508.826226 508.826226 0 0 1-40.238472 199.291759 510.292406 510.292406 0 0 1-109.73071 162.745886 510.27689 510.27689 0 0 1-162.745886 109.730709A508.795196 508.795196 0 0 1 512 1023.999069zM252.695744 543.348307a13.4904 13.4904 0 0 0 3.878781 9.471982 13.335248 13.335248 0 0 0 9.471983 3.917569l127.456738-0.201697a13.428339 13.428339 0 0 0 13.412824-13.412824l0.06206-51.680875a87.272569 87.272569 0 0 1 24.420804-20.030025 161.489161 161.489161 0 0 1 82.493911-20.16966h0.279272a159.573043 159.573043 0 0 1 82.230154 20.084327 86.985539 86.985539 0 0 1 24.296683 20.084327v51.362816a13.358521 13.358521 0 0 0 3.878781 9.471983 13.226643 13.226643 0 0 0 9.425437 3.917568l114.400762-0.170666h13.110279a13.358521 13.358521 0 0 0 9.495255-3.917569 13.451612 13.451612 0 0 0 3.878781-9.495255l0.054303-29.168432a13.226643 13.226643 0 0 0-0.387878-3.157327l-0.558544-2.327269a88.436203 88.436203 0 0 0-6.826655-27.570374c-25.553408-59.453953-131.288973-104.292659-245.914704-104.292659h-0.589575a511.355191 511.355191 0 0 0-134.903997 18.967238c-45.102463 12.776704-80.802762 30.681156-100.514726 50.424151a114.990336 114.990336 0 0 0-24.901773 35.645996 86.357176 86.357176 0 0 0-7.57138 34.505634l-0.054303 27.787586z"
                fill="#FC4A46" p-id="5308"></path>
            </svg>
          </router-link>
        </div>
        <div class="answer" @click="initiateCall">
          <svg t="1757643061053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4054" width="200" height="200">
            <path
              d="M512 0c282.770286 0 512 229.229714 512 512S794.770286 1024 512 1024 0 794.770286 0 512 229.229714 0 512 0z m-81.247086 370.746514c-55.222857-98.435657-91.867429-94.4128-100.937143-91.896685-35.4304 9.903543-64.117029 74.313143-46.562742 144.6912 17.6128 70.7584 54.959543 141.546057 111.440457 198.407314 56.963657 56.568686 127.780571 93.871543 198.465828 111.469714 70.363429 17.583543 134.8608-11.117714 144.705829-46.592 2.442971-8.981943 6.538971-45.568-91.984457-100.7616-28.218514-15.872-26.8288-3.642514-84.392229 31.597714-26.872686 16.369371-63.370971-10.591086-63.370971-10.591085-2.048-1.316571-29.681371-19.002514-49.517715-38.912-20.5824-20.626286-38.955886-49.532343-38.955885-49.532343s-27.0336-36.498286-10.532572-63.370972c35.284114-57.519543 47.396571-56.159086 31.6416-84.509257z"
              fill="#18C000" p-id="4055"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject, watchEffect } from 'vue'
import { GetUserInfoById_API } from '@/api/user.js'
import { useRouter, useRoute } from 'vue-router'
import { notification } from 'ant-design-vue'

const baseURL = import.meta.env.VITE_API_BASE_URL
const socket = inject('socket')
const router = useRouter()
const route = useRoute()
const info = ref({})
const callStatus = ref(false)
const currentInfo = ref({})
const videoEnabled = ref(true)
const audioEnabled = ref(true)
const localVideoRef = ref(null)
const localAudioRef = ref(null)
const remoteVideoRef = ref(null)
const peer = ref(null)

const getTargetInfo = async () => {
  const { data: res } = await GetUserInfoById_API(route.query.tid)
  info.value = res.data
}

// 获取本地媒体流
const setupLocalStream = async (video, audio) => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video, audio })
    if (localVideoRef.value) {
      localVideoRef.value.srcObject = stream;
    }
    if (localAudioRef.value) {
      localAudioRef.value.srcObject = stream;
    }
    return stream;
  } catch (error) {
    console.error('❌ 获取媒体流失败:', error);

    // 提供更友好的错误信息
    let errorMessage = '无法访问摄像头或麦克风';
    if (error.name === 'NotReadableError') {
      errorMessage = '摄像头或麦克风被其他应用程序占用，请关闭其他使用摄像头的应用后重试';
    } else if (error.name === 'NotFoundError') {
      errorMessage = '未找到可用的摄像头或麦克风';
    } else if (error.name === 'NotAllowedError') {
      errorMessage = '请允许浏览器访问摄像头和麦克风权限';
    }

    notification.error({
      message: '设备访问失败',
      description: errorMessage,
      duration: 5
    });

    throw error;
  }
}

// 切换视频
const toggleVideo = async () => {
  videoEnabled.value = !videoEnabled.value
  const stream = await setupLocalStream(videoEnabled.value, audioEnabled.value)
  if (localVideoRef.value) {
    localVideoRef.value.srcObject = stream
  }
  // if (!videoEnabled.value) {
  //   try {
  //     localVideoRef.value.srcObject.getTracks().forEach(track => track.stop())
  //     localVideoRef.value.display = 'none'
  //   } catch (error) {
  //     console.error('关闭视频轨道失败:', error)
  //   }
  // }
}

// 切换音频
const toggleAudio = () => {
  audioEnabled.value = !audioEnabled.value
  setupLocalStream(videoEnabled.value, audioEnabled.value)
  if (!audioEnabled.value) {
    try {
      localAudioRef.value.srcObject.getTracks().forEach(track => track.stop())
    } catch (error) {
      console.error('关闭音频轨道失败:', error)
    }
  }
}

// 结束通话
const endCall = () => {
  videoEnabled.value = false
  audioEnabled.value = false
  socket.emit('video-call-end', route.query.tid)
  router.push('/main')
}

// 拨打电话
const initiateCall = async () => {
  currentInfo.value.direction = 'outgoing'
  socket.emit('video-call-request', route.query.tid) // 发起视频通话请求

  const stream = await setupLocalStream(videoEnabled.value, audioEnabled.value) // 获取stream
  peer.value = new RTCPeerConnection() // 创建RTCPeerConnection对象
  for (const track of stream.getTracks()) {
    peer.value.addTrack(track, stream) // 添加本地轨道到peer连接
  }

  peer.value.onicecandidate = (event) => { // 监听ICE候选
    if (event.candidate) {
      socket.emit('video-call-sender-candidate', route.query.tid, event.candidate) // 向目标用户发送ICE候选
    }
  }

  const offer = await peer.value.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true }) // 创建Offer
  await peer.value.setLocalDescription(offer)  // 设置本地描述
  socket.emit('video-call-sender-offer', route.query.tid, offer) // 向目标用户发送Offer
}

// 接听电话
const acceptCall = async () => {
  currentInfo.value.direction = 'outgoing'
  callStatus.value = true
  socket.emit('video-call-accept', route.query.tid) // 向目标用户发送接听请求

  const stream = await setupLocalStream(videoEnabled.value, audioEnabled.value) // 获取stream
  for (const track of stream.getTracks()) {
    peer.value.addTrack(track, stream) // 添加本地轨道到peer连接
  }

  peer.value.onicecandidate = (event) => { // 监听ICE候选
    if (event.candidate) {
      socket.emit('video-call-sender-candidate', route.query.tid, event.candidate) // 向目标用户发送ICE候选
    }
  }

  const answer = await peer.value.createAnswer() // 创建Answer
  await peer.value.setLocalDescription(answer) // 设置本地描述
  socket.emit('video-call-sender-answer', route.query.tid, answer) // 向目标用户发送Answer
}

socket.on('video-call-accept', () => {
  callStatus.value = true
})

watchEffect(() => {
  if (peer.value) {
    peer.value.ontrack = (event) => {
      // console.log('收到远程视频轨道:', event.streams)
      if (event.streams && event.streams[0]) {
        remoteVideoRef.value.srcObject = event.streams[0]
      }
    }
  }
})

// 收到remoteCandidate
socket.on('video-call-receive-candidate', async (candidate) => {
  if (peer.value) await peer.value.addIceCandidate(candidate) // 添加ICE候选
  // console.log('接收方收到ICE候选:', candidate)
})

// 发送方收到remoteAnswer
socket.on('video-call-receive-answer', async (remoteAnswer) => {
  // console.log('收到远程Answer:', remoteAnswer)
  await peer.value.setRemoteDescription(remoteAnswer)
})

// 接收方收到remoteOffer
socket.on('video-call-receive-offer', async (remoteOffer) => {
  // console.log('收到远程Offer:', remoteOffer)
  peer.value = new RTCPeerConnection()
  await peer.value.setRemoteDescription(remoteOffer)
})

// 组件挂载时获取本地媒体流
onMounted(() => {
  getTargetInfo()
  currentInfo.value = route.query

  // 通话结束
  socket.once('video-call-end', (message) => {
    router.push('/main')
    notification.info({
      key: 'video-call-end',
      message: '通话已结束',
      description: message
    })
  })
})

onUnmounted(() => {
  socket.off('video-call-request')
  socket.off('video-call-end')
  socket.off('video-call-receive-candidate')
  socket.off('video-call-receive-answer')
  socket.off('video-call-receive-offer')
})
</script>

<style lang="less" scoped>
.video-call-container {
  width: 100vw;
  height: 100vh;
  background-color: #232323;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover; // 保持比例并填充整个容器
    -webkit-app-region: no-drag;
  }

  .icon-sender {
    width: 100vw;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 0;

    .operation {
      width: 100%;
      height: 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;

      .icon-left {
        width: 50px;
        height: 50px;
        background-color: #EAEAEA;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        margin: 0 auto;
      }

      .icon-right {
        width: 50px;
        height: 50px;
        background-color: #EAEAEA;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        margin: 0 auto;
      }

      .icon-left svg,
      .icon-right svg {
        width: 30px;
        height: 30px;
      }

      .tip {
        font-size: 12px;
        margin: 0 auto;
      }
    }

    .icon {
      width: 60px;
      height: 60px;
    }
  }

  .icon-receiver {
    width: 100vw;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 50px;

    .icon-top {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -150px;
      gap: 6px;
    }

    .icon-fotter {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      svg {
        flex: 1;
      }

      .icon {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>